<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/newTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

    <ui:define name="content">

        <f:metadata>
            <f:viewParam name="aso" value="#{web.aso}" />
            <f:event type="preRenderView" listener="#{web.testFunc()}" />
        </f:metadata>

        <h:form>
            <p:messages id="messag" showDetail="true"  autoUpdate="true" closable="true" > 
                <p:effect type="fade" event="load" delay="#{gestorPrincipal.delayMessage}" />
            </p:messages>
            <div class="art-content-layout-row">
                <div class="art-layout-cell" style="width: 50%" >
                    <div id="g1">
                        <h5>Galería</h5>
                        <span style="font-style:italic;">Fotos y videos de los mejores momentos de la escuela.</span>
                        <span style="text-align:center;"><img width="240" height="240" alt="" src="resources/images/gallery-icon.png" class=""/></span>
                        
                        <p:commandLink styleClass="art-button" value="Acceder..." action="#{gestorPrincipal.paginaGaleriasRedir()}"/>
                    </div>
                </div><div class="art-layout-cell" style="width: 50%" >
                    <div id="g2">
                        <h5>Temas</h5>
                        <span style="font-style:italic;">Foros, Temas, tu opinión es importante!!</span>
                        <br/>
                        <br/>
                        <span style="text-align:center;"><img width="240" height="240" alt="" src="resources/images/foros.png" class=""/></span>
                        <p:commandLink value="Acceder..." action="#{gestorPrincipal.paginaListaForoRedir()}" styleClass="art-button"/>
                    </div>
                </div>
            </div>
            <div class="art-content-layout-row">
                <div class="art-layout-cell" style="width: 50%" >
                    <div id="g3">
                        <h5>Eventos</h5>
                        <span style="font-style:italic;">Mantente al dia con los eventos que organiza la escuela.</span>
                        <span style="text-align:center;"><img width="240" height="240" alt="" src="resources/images/calendar_icon.png" class=""/></span>
                        <p:commandLink value="Acceder..." action="#{gestorPrincipal.paginaAgendaRedir()}" styleClass="art-button"/>
                    </div>
                </div><div class="art-layout-cell" style="width: 50%" >
                    <div id="g4">
                        <h5>Material de Apoyo</h5>
                        <span style="font-style:italic;">Trabajos, Libros, Documentos.</span>
                        <br/>
                        <br/>
                        <span style="text-align:center;"><img width="240" height="240" alt="" src="resources/images/recursos.png" class=""/></span>
                        <p:commandLink value="Acceder..." action="#{gestorPrincipal.paginaContenidoRedir()}" styleClass="art-button"/>
                    </div>
                </div>
            </div>
            <br/>

            <p:commandButton value="asdf" actionListener="#{gestorUsuario.pruebaBoton()}" rendered="false"/>

        </h:form>
    </ui:define>
</ui:composition>
